<template>
	<view>
		<cu-custom title="邀请好友奖" bgColor="rgba(255,255,255,0)" ></cu-custom>
		<view class="main-box bg-white d-s-f-r m-15">
			<view class="top-titel">
				活动介绍
			</view>
			<view class="c-txt p-15">
				活动期间内,邀请好友注册家有学霸并成功充值,就有机会参加“邀请好友大赛”,根据邀请用户的充值金额作为业绩积分进行排名,<text style="color:#EA3457; ;">最高单人奖励1万元</text>,具体奖励方案如下:
			</view>
			<view class="m-c-r m-15 flex">
				<view class="c-m-m" style="border-right: 1px solid #EA3457">
					<view class="title-r" style="border-right: 1px solid rgba(255,255,255,0.5);">
						充值业绩排名
					</view>
					<text>第1名</text>
					<text>第2名</text>
					<text>第3名</text>
					<text>第4-10名</text>
					<text>第11-20名</text>
					<text>第21-30名</text>
					<text>第31-50名</text>
				</view>
				<view class="c-m-m">
					<view class="title-r">
						现金奖励
					</view>
					<text>1万元</text>
					<text>5000元</text>
					<text>3000元</text>
					<text>1000元</text>
					<text>500元</text>
					<text>300元</text>
					<text>100元</text>
				</view>
			</view>
		</view>
		<view class="main-box bg-white d-s-f-r m-15 p-b-15">
			<view class="top-titel">
				如何参与活动
			</view>
			<view class="c-txt p-15">
				点击<text style="color:#EA3457; ;">“马上邀请好友注册”</text>按钮,将活动链接通过微信、QQ等渠道转发给好友,对方通过您转发的链接成功注册家有学霸,就算您的邀请用户,邀请用户如果在平台充值,就算您的邀请业绩
				
			</view>
			<view class=" m-l-10 m-r-10 p-b-15">
				<view class="f-l flex">
					邀请码<text class="d-p-b y-z-m m-l-10 m-r-10"> 6lqw</text><text class="c-red">复制</text>
				</view>
				<view class="f-r flex r-m-n">
					<image src="../../static/images/erweima.png" height="30" width="30"></image>
					<text class="c-red">二维码</text>
				</view>
			</view>
		</view>
		<view class="flex b-b-m">
			<button>查看我邀请的好友</button><button>马上邀请好友注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.main-box{ border-radius: 15px; margin-top: 25px; box-shadow: 5px 5px 25px 5px rgba(234, 52, 87, 0.5);}
.top-titel{ background: #EA3457; border-radius: 35px; text-align: center; height: 35px; line-height: 35px; color: #fff; width: 30%; margin:-15px 35% 0 35% ;}
.c-txt{ font-size: 13px; line-height: 2;}
.m-c-r{ border: #EA3457 1px solid;
text{width: 100%; display: block; height: 40px; line-height: 40px;text-align: center;}
}
.title-r{ text-align: center; background: #EA3457; color: #fff; width: 100%; height: 40px; line-height: 40px;}
.c-m-m{ width: 50%;}
.y-z-m{ background: #eee; padding: 5px 8px; border-radius: 15px; color: #999; font-size: 16px; margin-top: -5px;}
.r-m-n{
	image{width: 30px; height: 30px; margin-top: -5px; margin-right: 10px;}}
.b-b-m{ button{
	background: #EA3457; border-radius: 35px; width: 44%; color: #fff; margin: 20px 3%; font-size: 16px; height: 50px; line-height: 50px;
}}
</style>
